<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/gh/KonghaYao/chinese-free-web-font-storage/build/ipix_12px/result.css"
        />
        <style>
            html,
            body {
                height: 100vh;
                width: 100vw;
                margin: 0;
                padding: 0;
                border: 0;
                background-color: black;
                color: white;
                font-family: ipix_12px;
                overflow: hidden;
            }
            .title {
                font-size: 3rem;
            }
            .rotate {
                transform: rotate(350deg);
                background-color: #ffbc00;
                width: 120%;
                text-align: center;
                padding: 1rem;
                text-shadow: 11px 5px 4px #8a8aaa;
            }
            #app {
                position: relative;
                display: flex;
                flex-direction: column;
                height: 100vh;
                overflow: hidden;
                align-content: center;
                justify-content: space-evenly;
                align-items: center;
            }
            .btn {
                transform: rotate(9deg);
                text-shadow: 11px 5px 4px #8a8aaa;
                font-size: 2rem;
                width: 120%;
                height: 7rem;
            }
            .bottom {
                position: absolute;
                bottom: 1rem;
            }
            .Password__field {
                color: black !important;
            }
            .shower {
                height: 50%;
                color: black !important;
            }
            .text-center {
                text-align: center;
            }
            .resultTitle {
                font-size: 2rem;
                padding: 1rem;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="rotate">
                <div class="title">你的密码有多强？</div>
                <div>密码强度测试</div>
            </div>

            <van-button class="btn" type="info" @click="show=true"
                >点击开始测试</van-button
            >
            <van-popup
                v-model="show"
                class="shower"
                position="bottom"
                :close-on-click-overlay="false"
            >
                <div style="display: flex; flex-direction: column">
                    <h3 style="padding: 0.2rem 1rem" class="text-center">
                        请输入您的密码吧！
                    </h3>
                    <van-password
                        v-model="password"
                        style="width: 100%"
                    ></van-password>
                    <div class="text-center" style="padding: 0.5rem 0">
                        安全提示：请勿输入正在使用的密码！
                    </div>
                    <van-button
                        type="danger"
                        @click="strengthTest"
                        style="font-size: 1.5rem"
                    >
                        测试强度
                    </van-button>
                </div>
            </van-popup>

            <van-popup
                v-model="result"
                style="height: 100%; color: white; background-color: #ffffffcc"
                position="bottom"
                :close-on-click-overlay="false"
            >
                <div style="display: flex; flex-direction: column">
                    <div
                        class="resultTitle"
                        :style="{
                        backgroundColor:strength[info.level]
                    }"
                    >
                        破解这个密码需要<br />
                        {{info.time }}
                    </div>
                    <div>
                        <div
                            style="
                                font-size: 1.5rem;
                                padding: 1rem;
                                color: black;
                            "
                        >
                            需要注意的事情
                        </div>

                        <div
                            v-for="item in info.checks"
                            :style="{
                        backgroundColor:strength[item.level],
                        padding:'1rem 1rem',
                        margin:'1rem 0'
                    }"
                        >
                            <div
                                style="
                                    font-size: 1.5rem;
                                    padding-bottom: 0.5rem;
                                "
                            >
                                {{item.name}}
                            </div>
                            <div>{{item.message}}</div>
                        </div>

                        <van-button
                            type="info"
                            @click="reset"
                            style="font-size: 1.5rem; width: 100%"
                            >换个密码试试</van-button
                        >
                    </div>
                </div>
            </van-popup>

            <div class="bottom">
                本程序仅离线计算密码复杂度，不会存储您的密码！<br />
                为保证安全，无论如何，请勿输入正在使用的密码!<br />
                <a
                    style="color: white"
                    href="https://gitee.com/dongzhongzhidong/hsimp"
                >
                    程序源代码点我
                </a>
                <a
                    style="color: white"
                    href="https://github.com/howsecureismypassword/hsimp"
                >
                    程序灵感来源点我
                </a>
            </div>
        </div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/zxcvbn/dist/zxcvbn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-password-strength-meter"></script>

    <script type="module">
        import passwordTest from "./dist/index.js";
        new Vue({
            el: "#app",
            components: {
                "van-password": Password,
            },
            data() {
                return {
                    show: false,
                    result: false,
                    password: "",
                    info: {},
                    strength: {
                        insecure: "#d9480f",
                        warning: "#fab005",
                        "easter-egg": "#4263eb",
                        notice: "#12b886",
                        achievement: "#087f5b",
                    },
                };
            },
            mounted() {},
            methods: {
                strengthTest() {
                    this.show = false;
                    this.result = true;
                    this.info = passwordTest(this.password);

                    this.password = "";
                    console.log(this.info);
                },
                reset() {
                    this.result = false;
                    this.show = true;
                },
            },
        });
    </script>
</html>
